<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>脚本记录</title>
    <link rel="icon" href="{{ url_for('static', filename='ico/favicon_curl.png') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/show_codes.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/alert_msg.css') }}">
    <script type="module" src="{{ url_for('static', filename='js/show_code.js') }}"></script>

    <!-- 使用 highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            hljs.highlightAll();  // 确保页面加载完成后再初始化 highlight.js
        });
        document.querySelectorAll('#pythonCode code').forEach((block) => {
            hljs.highlightBlock(block); // 逐个代码块进行高亮
        });
    </script>
</head>
<body>

<!-- 标题 -->
<header class="header">
    <div class="header-title">
        <h2 class="title">脚本记录</h2>
        <p class="title-p">忽略了 test 开头的</p>
    </div>
    <button id="backButton" onclick="history.back()">返回</button>
</header>


<!-- 脚本列表 : -->
<div class="code-list">
    {% for row in codes|batch(3, '') %}
    <div class="row">
        {% for cell in row %}
        {% if cell != '' %}
        <div class="code-item" data-title="{{ cell.title|tojson|safe }}" onclick="get_code_info(this)">
            <div class="code-icon"></div>
            <div class="code-title">{{ cell.title }}</div>
        </div>
        {% endif %}
        {% endfor %}
    </div>
    <!-- 每行结束后清除浮动 -->
    <!--
    <div style="clear:both;"></div>
    -->
    {% endfor %}
</div>


<!-- 自定义通知, 右上角的通知区 -->
<div id="custom-alert" class="custom-alert"></div>


<!-- 弹框模板 -->
<div id="codeModal" style="display:none;">
    <div class="modal-content">
        <span id="closeModal">&times;</span>
        <pre id="pythonCode">
            <code id="pyCode" class="language-python" contenteditable="true">{{ python_code }}</code>
        </pre>
        <button id="copyCodeButton">复制代码</button>
    </div>
</div>


</body>
</html>